<template>
    <el-row>
        <el-button v-for="stock in state.stocks" :key="stock"
        @click="select(stock)"
        plain>{{ stock }}</el-button>
    </el-row>
    <h2>daily</h2>
    <daily-histogram-echart :stock="state.stockSelected" :key="state.stockSelected"></daily-histogram-echart>
    <h2>week</h2>
    <week-histogram-echart :stock="state.stockSelected" :key="state.stockSelected"></week-histogram-echart>
</template>

<script setup>
import { reactive } from 'vue';
import DailyHistogramEchart from '../components/DailyHistogramEchart.vue'
import WeekHistogramEchart from '../components/WeekHistogramEchart.vue'
import { useRouteQuery } from '../utils/useRoute';

const state = reactive({
    stocks : [],
    stockSelected : ''
})

let stocks = useRouteQuery('stocks', '')
if (stocks) {
    state.stocks = stocks.split(';')
    state.stockSelected = state.stocks[0]
}

const select = (stock) => {
    state.stockSelected = stock
}

</script>

<style>
</style>